<template>
  <view class="page container">
    <z-paging :auto="false" :refresher-enabled="false" :auto-full-height="false" :default-page-size="15" ref="pagingRef"
      v-model="dataList" @query="queryList" :paging-style="{ 'background-color': 'transparent' }">
      <view slot="top" class="page-top" :style="{ paddingBottom: viewType === 'map' ? '0' : '28rpx' }">
        <view class="search-box bgc-fff flex-column-center pl-32 pr-24">
          <u-search shape="square" placeholder="请输入烟酒门店关键字" v-model="params.title" :showAction="false"
            @search="handleSearch" @clear="handleSearch"></u-search>
        </view>
        <view class="bgc-fff" style="padding: 16rpx 32rpx">
          <view class="tabs">
            <view class="tab" :class="{ 'tab-active': activeTab === '1' }" @click="changeTab('1')">酒厂</view>
            <view class="tab" :class="{ 'tab-active': activeTab === '2' }" @click="changeTab('2')">酒商</view>
            <view class="tab" :class="{ 'tab-active': activeTab === '3' }" @click="changeTab('3')">酒产品</view>
          </view>
        </view>
        <view class="filter-wrapper">
          <FactoryScreen :activeTab="activeTab" @overlay_show="overlayShow" ref="screenRef" @onSearch="onScreen"
            @onReast="onReast">
          </FactoryScreen>
        </view>
      </view>
      <u-overlay :show="overlay_show" @click="clickOverlay" :zIndex="2"></u-overlay>
      <view v-if="(activeTab == 1 || activeTab == 2) && dataList.length" class="pt-28 bgc-fff">
        <view class="bgc-fff pad-28" style="padding-top: 0" v-for="(item, index) in dataList" :key="index">
          <FactoryCard :info="item"></FactoryCard>
        </view>
      </view>
      <view v-if="activeTab == 3 && dataList.length" class="pt-28 bgc-fff">
        <view class="bgc-fff pad-28" style="padding-top: 0" v-for="(item, index) in dataList" :key="index">
          <GoodsCard :info="item"></GoodsCard>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
import FactoryCard from "@/components/rowCards/FactoryCard.vue";
import GoodsCard from "@/components/rowCards/GoodsCard.vue";
import FactoryScreen from "@/components/FactoryScreen/index.vue";
import { factoryListApi, productListApi } from "@/services/home.js";
export default {
  components: {
    FactoryCard,
    GoodsCard,
    FactoryScreen,
  },
  data() {
    return {
      activeTab: "1",
      overlay_show: false,
      viewType: "list",
      dataList: [],
      selectedValues: {},
      params: {
        title: "",
        lat: "",
        lng: "",
      },
    };
  },
  onLoad() {
    //获取当前经纬度
    uni.getLocation({
      type: "wgs84",
      success: (res) => {
        this.params.lat = res.latitude;
        this.params.lng = res.longitude;
        this.$refs.pagingRef?.reload();
      },
      fail: () => {
        this.$refs.pagingRef?.reload();
      },
    });
  },
  onShow() {
    setTimeout(() => {
      const { text, type } = this.$store.state.searchInfo;
      switch (type) {
        case 'jc':
          this.activeTab = "1";
          break;
        case 'js':
          this.activeTab = "2";
          break;
        case 'goods':
          this.activeTab = "3";
          break;
        default:
          break;
      }
      if (text) {
        this.params.title = text;
        this.$store.commit("clearSearchInfo");
        this.$refs.pagingRef?.reload();
      }
    }, 300)
  },
  methods: {
    changeTab(tab) {
      this.activeTab = tab;
      this.$refs.screenRef.onReast();
    },
    overlayShow(e) {
      this.overlay_show = e;
    },
    clickOverlay() {
      this.$refs.screenRef.overlay_show = false;
    },
    handleMarkerClick(item) {
      this.$utils.to(`/pages2/garden/garden_detail?id=${item.id}`);
    },
    handleSearch() {
      this.$refs.pagingRef?.reload();
    },
    queryList(page, size) {
      const selectedValues = uni.$u.deepClone(this.selectedValues);
      //order_sort需要json形式
      // selectedValues.order_sort &&
      //   (selectedValues.order_sort = JSON.stringify(selectedValues.order_sort));
      const requestObj = {
        page,
        page_size: size,
        ...this.params,
        ...selectedValues,
      };
      if (this.activeTab == 1 || this.activeTab == 2) {
        requestObj.type = this.activeTab == 1 ? "1" : "0";
        factoryListApi(requestObj).then((res) => {
          this.$refs.pagingRef?.complete(res.data?.data || []);
        });
      } else {
        //产品
        productListApi(requestObj).then((res) => {
          this.$refs.pagingRef?.complete(res.data?.data || []);
        });
      }
    },
    onReast() {
      this.selectedValues = {}; //先还原
      this.$refs.pagingRef?.reload();
    },
    onScreen(e) {
      const { area, distance, views, price, more, brand, cate, alcohol_id, aroma_id, volume_id, pack_id } = e;
      const [city, district, town, village] = area;
      this.selectedValues = this.$options.data.selectedValues; //先还原
      if (this.activeTab == 1 || this.activeTab == 2) {
        const requestObj = {
          city: this.filterAll(city),
          district: this.filterAll(district),
          town: this.filterAll(town),
          village: this.filterAll(village),
          order_sort: { distance, see_num: views },
        };
        this.selectedValues = requestObj;
      } else {
        const requestObj = {
          brand: brand[0],
          cate: cate[0],
          order_sort: { price },
          alcohol_id,
          aroma_id,
          volume_id,
          pack_id,
        };
        this.selectedValues = requestObj;
      }
      this.$refs.pagingRef?.reload();
    },
    filterAll(e) {
      if (["all4", "all3", "all2", "all1"].includes(e)) {
        return "";
      }
      return e;
    },
    // filterSort(e) {
    //   if (e == "asc") {
    //     return '';
    //   }
    //   if (e == "desc") {
    //     return 2;
    //   }
    //   return 0;
    // },
  },
};
</script>

<style lang="scss" scoped>
.filter-container {
  display: flex;
  width: 100%;
  background-color: #fff;
  position: relative;
  z-index: 100;
}

.filter-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;

  .arrow {
    font-size: 12px;
    margin-left: 4px;
    transition: transform 0.3s;
    color: #999;

    &.arrow-up {
      transform: rotate(180deg);
    }
  }
}

.page {
  background-color: #f7f8fa;

  .page-top {
    padding-bottom: 28rpx;
    position: relative;
    z-index: 999;

    .search-box {
      position: relative;
      z-index: 999;
    }
  }

  .filter-wrapper {
    position: relative;
    z-index: 100;
  }

  .list {
    .item {
      display: flex;
      align-items: center;
      position: relative;

      .detail-btn {
        position: absolute;
        right: 28rpx;
        bottom: 28rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #fff;
        background-color: $theme_color;
      }

      .texts {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        height: 216rpx;
        margin-left: 24rpx;

        &>view {
          font-size: 28rpx;

          &>text:first-child {
            color: #677585;
          }
        }
      }
    }
  }
}

.tabs {
  width: 686rpx;
  height: 68rpx;
  border-radius: 12rpx;
  background: #f7f8fa;
  display: flex;
  justify-content: space-between;

  .tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    font-weight: 500;

    &-active {
      border-radius: 12rpx;
      background: $theme-color;
      color: #fff;
    }
  }
}
</style>
